<template>
  <div class="box">
    <!-- 头部功能键 -->
    <div class="header-nav" v-if="top === 0">
      <van-icon name="arrow-left"  size="1rem" @click="$router.back()" />
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
          :offset="[-8, 0]"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis"  size="1rem"/>
          </template>
        </van-popover>
        <!-- 分享弹出层 -->
      <van-share-sheet
        v-model="showShare"
        :options="options"
        title="立即分享给好友"
        description="帮忙砍一刀！"
      />
    </div>
    <div class="header-nav-else" v-else>
      <van-icon name="arrow-left"  size="1rem" @click="$router.back()" />
        <van-popover
          v-model="showPopover"
          theme="dark"
          trigger="click"
          :actions="actions"
          placement="bottom-end"
          :offset="[-8, 0]"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="ellipsis"  size="1rem"/>
          </template>
        </van-popover>
        <!-- 分享弹出层 -->
      <van-share-sheet
        v-model="showShare"
        :options="options"
        title="立即分享给好友"
        description="帮忙砍一刀！"
      />
    </div>
    <div class="content" ref="content">
      <!-- 轮播图 -->
      <div class="detail-swipe">
        <van-swipe class="my-swipe" indicator-color="white">
          <van-swipe-item v-for="(item, index) of banners" :key="index" @click="priviewImg(index)">
            <van-image :src="item" fit="cover"/>
          </van-swipe-item>
        </van-swipe>
        <div class="video" @click="show = true">
          <span>1'30"</span>
        </div>
        <van-popup v-model="show">
          <video id="vdo" controls autoplay width="100%" src="https://jvod.300hu.com/vod/product/6cca8ece-73a3-4fa3-b05d-89471ab940d0/81e52ae5eab444db9a4e3f8eb5039d9f.mp4"></video>
        </van-popup>
      </div>
      <!-- 商品信息 -->
      <div class="info">
        <!-- 价格 -->
        <div class="pricetitle">
          <div class="pricec">￥{{originprice}}</div>
          <div class="right">
            <div class="decprice right-ic">
              <van-icon name="refund-o" />
              <p>降价提醒</p>
            </div>
            <div class="collect right-ic">
              <van-icon name="like-o" />
              <p>收藏</p>
            </div>
          </div>
        </div>
        <!-- 商品名称 -->
        <div class="proname">
          <h3>
            <van-tag type="danger">{{ brand }}</van-tag>
            <van-tag type="primary">{{ category }}</van-tag>
            {{ proname }}
          </h3>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="introduce">
        <p>{{desc}}</p>
      </div>
    </div>
    <!-- 底部 -->
    <!-- 下架 -->
    <van-goods-action  v-if="issale === 0">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车"  />
      <van-goods-action-icon icon="shop-o" text="店铺"  />
      <van-goods-action-button type="danger" disabled text="商品已下架"/>
    </van-goods-action>
    <!-- 售卖中 -->
    <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o"  text="客服" dot />
        <van-goods-action-icon icon="cart-o"  @click="$router.push('/cart')" text="购物车" :badge="cartList ? cartList.length : ''" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button type="warning" @click="addCartFn" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
  </div>
</template>

<script>
import { getProDetail } from './../../api/detail'
import Vue from 'vue'
import { Popup, Tag, GoodsAction, GoodsActionIcon, GoodsActionButton, ShareSheet, Toast, NavBar, Swipe, SwipeItem, Image as VanImage, ImagePreview, Icon, Popover } from 'vant'
import { addCart, getCartList } from '../../api/cart'
Vue.use(Swipe)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Icon)
Vue.use(ImagePreview)
Vue.use(Popover)
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(ShareSheet)
Vue.use(Tag)
Vue.use(Popup)
export default {
  watch: {
    show (newVal) {
      const vdo = document.getElementById('vdo')
      if (!newVal) {
        vdo.pasue()
      }
    }
  },
  data () {
    return {
      proid: '',
      banners: [], // 轮播图
      brand: '', // 品牌
      category: '', // 分类
      desc: '', // 详情
      discount: 0, // 折扣
      isrecommend: 1, // 是否被推荐
      issale: 0, // 是不是上架状态
      isseckill: 0, // 是否被秒杀
      originprice: 0, // 商品原价
      proname: '', // 产品名称
      sales: 0, // 销量
      stock: 0, // 库存
      show: false, // 视频显示
      showPopover: false,
      top: 0, // 监听滚动条的距离
      actions: [
        { index: 1, text: '首页', icon: 'wap-home-o' },
        { index: 2, text: '分类搜索', icon: 'search' },
        { index: 3, text: '我的嗨购', icon: 'user-circle-o' },
        { index: 4, text: '浏览记录', icon: 'records' },
        { index: 5, text: '分享', icon: 'share-o' }
      ],
      showShare: false, // 分享
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      cartList: []
    }
  },
  methods: {
    addCartFn () {
      // 1.前端判断用户的登录状态
      if (localStorage.getItem('isLogin') === 'true') {
        // 2.后端校验登录--拦截器
        addCart({
          userid: localStorage.getItem('userid'),
          num: 1,
          proid: this.proid
        }).then(res => {
          console.log(res.data)
          Toast('加入购物车成功')
        })
      } else {
        Toast('请登录')
        console.log(111)
        this.$router.push('/login')
      }
    },
    priviewImg (index) { // 图片放大
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    onSelect (action) {
      console.log(action)
      switch (action.index) {
        case 1:
          this.$router.push('/home')
          break
        case 2:
          this.$router.push('/kind')
          break
        case 3:
          this.$router.push('/user')
          break
        case 4:
          Toast('暂未开放')
          break
        case 5:
          this.showShare = true
          break
      }
    }
  },
  async mounted () {
    const result = await getCartList({
      userid: localStorage.getItem('userid')
    })
    if (result) {
      this.cartList = result.data.data
      this.proid = this.$route.params.proid
    }
    const res = await getProDetail(this.proid)
    // console.log(res.data.data)
    this.banners = res.data.data.banners[0].split(',')
    this.banners = res.data.data.banners[0].split(',')
    this.brand = res.data.data.brand
    this.category = res.data.data.category
    this.desc = res.data.data.desc
    this.discount = res.data.data.discount
    this.isrecommend = res.data.data.isrecommend
    this.issale = res.data.data.issale
    this.isseckill = res.data.data.isseckill
    this.originprice = res.data.data.originprice
    this.proname = res.data.data.proname
    this.sales = res.data.data.sales
    this.stock = res.data.data.stock
    // 监听滚动条的滚动
    this.$refs.content.addEventListener('scroll', () => {
      this.top = this.$refs.content.scrollTop
      // console.log('top', this.top)
    })
  }
}
</script>

<style lang="scss" scoped>
  .box{
    width: 100%;
    height: 100%;
    position: relative;
    .header-nav{
      width: 100%;
      position: absolute;
      z-index: 2;
      display: flex;
      height: 50px;
      justify-content: space-between;
      i{
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #666;
        color:#fff;
        margin: 0.5rem;
      }
    }
    .header-nav-else{
      background-color: #ffffffd0;
      border-bottom: 1px solid #ccc;
      width: 100%;
      position: absolute;
      z-index: 2;
      display: flex;
      height: 50px;
      justify-content: space-between;
      i{
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #666;
        color:#fff;
        margin: 0.5rem;
      }
    }
    .content{
      padding-bottom: 50px;
      .detail-swipe{
        position: relative;
        .my-swipe{
          width: 100%;
          .van-swipe__track{
            width: 100%;
            .van-swipe-item{
              width: 100%;
              height: 20rem;
              .van-image{
                width: 100%;
                height: 20rem;
                overflow: hidden;
                img{
                  width: 100%;
                }
              }
            }
          }
        }
        .video{
          width: 85px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 20px;
          margin: auto;
          font-size: 16px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          background: no-repeat url('');
          background-size: contain;
          span{
            margin-left: 20px;
          }
        }
        .van-popup{
          width: 100%;
          #vdo{
            width: 100%;
          }
        }
      }
      .info{
        width: 100%;
        margin-bottom: 0.5rem;
        background-color: #fff;
        border-radius: 0 0 0.6rem 0.6rem;
        .pricetitle{
          display: flex;
          justify-content: space-between;
          height: 2.8rem;
          line-height: 2.8rem;
          .pricec{
            color: #ff2727;
            padding-left: 10px;
          }
          .right{
            display: flex;
            padding-right: 10px;
            justify-content: space-evenly;
            .right-ic{
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin: 0.1rem 0.6rem;
              p{
                margin: 0;
                font-size: 12px;
                line-height: 12px;
              }
            }
          }
        }
        .proname{
          font-size: 16px;
          font-weight: 400;
          h3{
            margin: 0;
            padding: 0 15px 10px;
            .van-tag{
              margin: 0 5px;
              height: 16px;
            }
          }
        }
      }
      .introduce{
        background-color: #fff;
        width: 100%;
        margin-top: 10px;
        border-radius: 0.6rem;
        p{
          padding: 0.5rem;
          line-height: 30px;
          margin: 0;
        }
      }
    }
  }
</style>
